<template>
  <div class="container">
    <!-- 预览 -->
    <el-dialog
      title="预览文章"
      :visible="showPreviewDialog"
      width="60%"
      @close="handleClose"
      top="10vh"
    >
      <h2>{{ previeFrom.title }}</h2>
      <span>
        {{ previeFrom.createTime | formaTime('YYYY-MM-DD HH:mm:ss') }}
      </span>
      <span>{{ previeFrom.username }} </span>
      <i class="el-icon-view" style="margin-right: 10px"></i>
      <span>{{ previeFrom.visits }}</span>
      <el-divider><i class="el-icon-medal"></i></el-divider>
      <div
        style="background: #f5f5f5"
        v-html="previeFrom.articleBody"
        class="text"
      ></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 预览框
    showPreviewDialog: {
      type: Boolean,
      required: true
    },
    // 数据回显详情
    previeFrom: {
      type: Object,
      require: true
    }
  },
  data () {
    return {}
  },
  methods: {
    handleClose () {
      this.$emit('update:showPreviewDialog', false)
    }
  }
}
</script>

<style scoped lang="scss">
span {
  margin-right: 10px;
}
::v-deep .text {
  text-indent: 30px;
  line-height: 22px;
}
</style>
